import Container from '@icedesign/container';
import React, { Component } from 'react';
import Img from '@icedesign/img';
import { Message, Grid, Pagination, Loading } from '@alifd/next';
import request from '../../../../instances/request';

const { Row, Col } = Grid;

class StaffList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userList: [],
      totalCount: 0,
      pageSize: this.props.limit,
      currentPage: 1,
      __loading: true,
    }
  }

  // todo: 这里才是数据请求的典范
  async getDutyList() {
    let res = await request.post('/dashboard/dutyList', {
      page: this.state.currentPage,
      limit: this.props.limit,
    });
    let { code, msg } = res.data;
    if(code !== 0) {
      Message.error(msg.error);
      throw new Error(`code为${code}`);
    }
    let { userList, totalCount } = msg;
    // check userList and totalCount here
    return { userList, totalCount };
  }

  handlePageChange(page) {
    this.setState({
      currentPage: page,
    }, () => {
      this
        .getDutyList()
        .then(({ userList, totalCount }) => {
          userList.sort((a, b) => {  // 将组长放到第一的位置
            return a.isTeamLeader ? -1 : ( b.isTeamLeader ? 1 : -1);
          });
          this.setState({
            totalCount,
            userList,
          })
        });
    })
  }

  async componentDidMount() {
    let {userList, totalCount} = await this.getDutyList();
    userList.sort((a, b) => {  // 将组长放到第一的位置
      return a.isTeamLeader ? -1 : ( b.isTeamLeader ? 1 : -1);
    });
    this.setState({
      totalCount,
      userList,
      __loading: false,
    });
  }


  render() {
    return (
      this.state.__loading ?
        <Loading tip='加载中' />:
        <div style={{ paddingRight: '2px' }}>
          <Container style={{ minHeight: '370px', marginBottom: '0px', padding: '0 0 20px 0', }} className='dashboard-user-list'>
            <div style={{ height: '60px', background: '#EAEBEF' }}>
              <div style={
                {
                  float: 'left',
                  fontSize: '20px',
                  fontWeight: 'bold',
                  height: '60px',
                  lineHeight: '60px',
                  paddingLeft: '30px',
                }
              }>
                <Img width={22} height={22} src={require('../../images/group-people.svg')} style={{ display: 'inline', verticalAlign: 'middle' }}/>
                <span style={{ display: 'inline', verticalAlign: 'middle' }}>&nbsp;值班人员</span>
              </div>
              <div style={{
                float: 'right',
                lineHeight: '60px',
                marginRight: '20px',
              }}>
                <Pagination
                  shape='no-border'
                  type="simple"
                  onChange={this.handlePageChange.bind(this)}
                  total={this.state.totalCount}
                  hideOnlyOnePage={true}
                  pageSize={this.props.limit}
                />
              </div>
              <div style={{ clear: 'both' }} />
            </div>
            <div style={styles.content}>
              {
                this.state.userList.map((user, idx) => {
                  return (
                    <li key={idx} style={styles.item} className='dashboard-user-list-item'>
                      <div style={styles.left}>
                        <Img style={{ verticalAlign: 'middle' }} width={50} height={50} src={user.avatar} shape='shape'/>
                      </div>
                      <div style={styles.right}>
                        <div style={{
                          ...styles.rightItem,
                          lineHeight: '25px',
                        }}>
                          <span style={{ color: 'rgb(51, 51, 51)', fontSize: '15px', verticalAlign: 'middle' }}>{user.username}</span>
                          {
                            user.isTeamLeader &&
                            <span style={{
                              ...styles.tag,
                              ...styles.top,
                              marginLeft: '20px',
                              verticalAlign: 'middle'
                            }}>值班组长</span>
                          }
                        </div>
                        <div style={styles.rightItem}><span>邮箱:&nbsp;</span><span>{user.email || '无'}</span></div>
                        <div style={styles.rightItem}><span>电话:&nbsp;</span><span>{user.phone || '无'}</span></div>
                      </div>
                    </li>
                  )
                })
              }
              <div style={{ clear: 'both' }} />
            </div>
          </Container>
        </div>
    )
  }
}

export default StaffList;

const styles = {
  header: {
    fontSize: 18,
    lineHeight: '32px',
    fontWeight: 700,
    float: 'left',
  },
  content: {
    padding: '0 20px 0 30px'
  },
  item: {
    // textAlign: 'center',
    textAlign: 'left',
    listStyle: 'none',
    marginTop: '28px',
    marginRight: '5px',
    width: '250px',
  },
  avatar: {
    width: '40px',
    height: '40px',
  },
  left: {
    display: 'inline-block',
    padding: '0 8px 0 0',
    verticalAlign: 'middle',
  },
  right: {
    // color: 'rgb(51, 51, 51)',
    color: 'rgb(113, 113, 113)',
    display: 'inline-block',
    textAlign: 'left',
    fontSize: '13px',
    lineHeight: '20px',
    verticalAlign: 'middle',
  },
  rightItem: {
    overflow: 'hidden',
    width: (250 - 70),
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  },
  tag: {
    fontSize: 12,
    lineHeight: '16px',
    marginLeft: 5,
    padding: '1px 8px',
    borderRadius: 20,
  },
  hot: {
    backgroundColor: '#ffe8e8',
    color: '#ee706d',
  },
  top: {
    backgroundColor: '#eff6ff',
    color: '#5e83fb',
  },
};
